<template>
  <el-select
    :style="style"
    v-model="form[item.key]"
    :multiple="item.multiple"
    @visible-change="visible = true"
    :disabled="item.disabled"
    popper-class="dropdown"
    @remove-tag="removeTag"
  >
    <el-option
      v-for="option of selectedRows"
      :key="option.id"
      :label="option.cname"
      :value="option.cname"
    />
  </el-select>
  <el-dialog
    :title="$t('lang.form.selectUser')"
    v-model="visible"
    v-if="visible"
    append-to-body
    width="80%"
    style="height: 50vh"
  >
    <org-layout>
      <search
        placeholder-id="lang.placeholder.inputUserNameOrCname"
        @on-search="changePage"
        class="search"
      />
      <el-card class="selectedUser" shadow="never">
        <span>{{ $t('lang.form.selectedUser') }}</span>
        <el-tag
          class="tag"
          v-for="row in selectedRows"
          :key="row.id"
          closable
          type="success"
          @close="closeTag(row)"
        >
          {{ row.cname }}
        </el-tag>
      </el-card>
      <records
        :selection="item.multiple"
        :columns="columns"
        :sort="sort"
        :data-source="dataSource"
        :loading="loading"
        :pagination="pagination"
        @change-page="changePage"
        v-model:selectedRows="selectedRows"
        value-path="userId"
      />
    </org-layout>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch, toRefs } from 'vue'
import Search from '@/components/Filter/Search.vue'
import Records from '@/components/Records/index.vue'
import { User } from '@/components/Form/types'
import { fetchRecordsRequest } from '@/api/user'
import useSearch from '@/hooks/useSearch'
import { COLUMNS } from './config'
import { differenceBy, map, remove } from 'lodash'
import OrgLayout from '@/components/OrgLayout/index.vue'
import { ObjectType } from 'typings/interfaces'

interface Row {
  id: string
  cname: string
  username: string
  phone: string
  email: string
}

export default defineComponent({
  name: 'Users',
  emits: {
    'update:form': null,
  },
  props: {
    form: {
      type: Object as PropType<ObjectType>,
      required: true,
    },
    item: {
      type: Object as PropType<User>,
      required: true,
    },
    placeholderId: {
      type: String,
      default: '',
    },
  },
  components: {
    Search,
    Records,
    OrgLayout,
  },
  setup(props) {
    const selectedRows = ref<Row[]>([])
    const { dataSource, changePage, loading, pagination, sort } = useSearch(fetchRecordsRequest)
    const { form, item } = toRefs(props)

    // 设置表单值
    watch(
      selectedRows,
      (newValue) =>
        (form.value[item.value.key] = item.value.multiple
          ? map(newValue, ({ cname }) => cname)
          : newValue[0].cname)
    )

    return {
      visible: ref(false),
      selectedRows,
      queryFields: ['cname', 'username'],
      dataSource,
      columns: COLUMNS,
      loading,
      changePage,
      pagination,
      sort,
      style: {
        width: props.item?.width ? props.item.width + 'px' : '100%',
      },
      removeTag: (cname: string) => remove(selectedRows.value, { cname }),
      closeTag: (row: Row) => (selectedRows.value = differenceBy(selectedRows.value, [row])),
      onSearch: (value: string) => {
        changePage(1, {
          cname: value,
          username: value,
        })
      },
    }
  },
})
</script>

<style lang="scss" scoped>
.selectedUser {
  margin: 10px 0;
  height: 76px;
  overflow: auto;
  .tag {
    margin: 5px;
  }
}

.search {
  width: 300px;
}
.dropdown {
  display: none;
  // :global(.el-select__popper.el-popper[role='tooltip']) {
  //   display: none;
  // }
  // :global(.el-select-dropdown) {
  //   display: none;
  // }
}
</style>
